<template>
  <div class="menu-wrapper">
    <template v-for="item in menu">
      <el-menu-item
        v-if="validatenull(item.children)"
        :index="item.path"
        @click="open(item)"
        :key="item.name"
        :class="{ 'is-collapse': collapse }"
      >
        <!-- <i class="el-icon-s-tools"></i> -->
        <span slot="title">{{ item.name }}</span>
      </el-menu-item>
      <el-submenu
        v-else-if="!validatenull(item.children)"
        :index="item.path"
        :key="item.name"
        :class="{ 'is-collapse': collapse }"
      >
        <template slot="title">
          <i style="width: auto" class="el-icon-s-tools"></i>
          <span
            slot="title"
            :class="{ 'el-menu--display': collapse && first }"
            >{{ item.name }}</span
          >
        </template>
        <template v-for="(child, cindex) in item.children">
          <el-menu-item
            :index="child.path"
            @click="open(child)"
            v-if="validatenull(child.children)"
            :key="child.name"
          >
            <i v-if="validatenull(item.children)" class="el-icon-s-tools"></i>
            <span slot="title">{{ child.name }}</span>
          </el-menu-item>
          <sidebar-item
            v-else
            :menu="[child]"
            :key="cindex"
            :collapse="collapse"
          ></sidebar-item>
        </template>
      </el-submenu>
    </template>
  </div>
</template>
<script>
import { validatenull } from "@/utils/validate";
export default {
  name: "SidebarItem",
  data: () => ({
    roles: "KK",
  }),
  props: {
    menu: {
      type: Array,
    },
    first: {
      type: Boolean,
      default: false,
    },
    collapse: {
      type: Boolean,
    },
  },
  created() {},
  mounted() {},
  methods: {
    validatenull(val) {
      return validatenull(val);
    },
    open(val) {
      // if (val.id) this.$store.dispatch("SaveMenuInClick", val.id);
      this.$router.push({
        path: val.path,
      });
    },
  },
};
</script>
